<script lang="ts" setup>
import 'vue-cropper/dist/index.css';
import { VueCropper } from 'vue-cropper';
import { ref } from 'vue';
defineOptions({ name: 'WindowsCropper' });
const crap = ref(false);
const previews = ref({} as any);
const cropper = ref(null);
const option = ref({
  img: 'http://img1.vued.vanthink.cn/vued751d13a9cb5376b89cb6719e86f591f3.png',
  size: 1,
  full: false, //输出原图比例截图 props名full
  outputType: 'png',
  canMove: true,
  original: true,
  canMoveBox: true,
  autoCrop: true,
  autoCropWidth: 200,
  autoCropHeight: 200,
  fixedBox: true,
});
const downImg = ref('#');
const changeScale = num => {
  num = num || 1;
  cropper.value.changeScale(num);
};
const rotateLeft = () => {
  cropper.value.rotateLeft();
};
const rotateRight = () => {
  cropper.value.rotateRight();
};
const finish = type => {
  // 输出 // var test = window.open('about:blank') // test.document.body.innerHTML = '图片生成中..' if (type === 'blob' ) { this.$refs .cropper .getCropBlob ((data ) => { var img = window .URL . createObjectURL (data ) this.model = true this.modelSrc = img }) } else { this.$refs .cropper .getCropData ((data ) => { this.model = true this.modelSrc = data }) }
};
const realTime = data => {
  previews.value = data;
};
const down = type => {
  // event.preventDefault()
  var aLink = document.createElement('a');
  aLink.download = 'author-img'; // 输出
  if (type === 'blob') {
    cropper.value.getCropBlob(data => {
      console.log(data);
      downImg.value = window.URL.createObjectURL(data); // aLink.download = this.downImg;
      console.log(downImg.value);
      aLink.href = window.URL.createObjectURL(data);
      aLink.click();
    });
  } else {
    cropper.value.getCropData(data => {
      downImg.value = data;
      aLink.href = data;
      aLink.click();
    });
  }
};
const uploadImg = (e, num) => {
  //上传图片 // this.option.img
  var file = e.target.files[0];
  if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
    alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种');
    return false;
  }
  var reader = new FileReader();
  reader.onload = e => {
    let data;
    if (typeof e.target.result === 'object') {
      // 把Array Buffer转化为blob 如果是base64不需要
      data = window.URL.createObjectURL(new Blob([e.target.result]));
    } else {
      data = e.target.result;
    }
    if (num === 1) {
      option.value.img = data;
    } else if (num === 2) {
      //this.example2.img = data;
    }
  }; // 转化为base64 // reader.readAsDataURL(file)
  // 转化为blob
  reader.readAsArrayBuffer(file);
};
const imgLoad = msg => {
  console.log(msg);
};
</script>

<template>
  <el-dialog model-value title="更换头像">
    <div class="cropper-content">
      <div class="cropper">
        <vue-cropper
          ref="cropper"
          :img="option.img"
          :outputSize="option.size"
          :outputType="option.outputType"
          :info="true"
          :full="option.full"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :original="option.original"
          :autoCrop="option.autoCrop"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          @imgLoad="imgLoad"
        ></vue-cropper>
      </div>
      <!-- <div class="show-preview" :style="{ width: previews.w + 'px', height: previews.h + 'px', overflow: 'hidden' }">
        <div :style="previews.div" class="preview">
          <img :src="previews.url" :style="previews.img" />
        </div>
      </div> -->
    </div>

    <div class="footer-btn">
      <div class="scope-btn">
        <label class="btn" for="uploads">更换照片</label>
        <input type="file" id="uploads" style="position: absolute; clip: rect(0 0 0 0)" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)" />

        <button @click="changeScale(1)">+</button>
        <button @click="changeScale(-1)">-</button>
        <button @click="rotateLeft">↺</button>
        <button @click="rotateRight">↻</button>
      </div>
      <div class="upload-btn">
        <button @click="down('blob')">下载</button>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.cropper-content {
  display: flex;
  justify-content: center;
  align-items: center;
  .cropper {
    width: 300px;
    height: 300px;
  }
  .show-preview {
    flex: 1;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    .preview {
      overflow: hidden;
      border-radius: 50%;
      border: 1px solid #cccccc;
      background: #cccccc;
      margin-left: 40px;
    }
  }
}
.footer-btn {
  margin-top: 30px;
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  .scope-btn {
    width: 350px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
  }
  .upload-btn {
    flex: 1;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
  }
  .btn {
    outline: none;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -webkit-transition: 0.1s;
    transition: 0.1s;
    font-weight: 500;
    padding: 8px 15px;
    font-size: 12px;
    border-radius: 3px;
    color: #fff;
    background-color: #67c23a;
    border-color: #67c23a;
  }
}
</style>
